<template>
  <view class="list-index">
    <view class="header-wrap">
      <view
        class="item"
        v-for="(label, index) of labels"
        :style="label.style"
        :key="index"
        >{{ label.name }}</view
      >
    </view>

    <view class="list" v-if="lists && lists.length">
      <view class="item" v-for="(item, idx) of lists" :key="idx">
        <view class="cell" :style="labels[0].style">{{ item.name }}</view>
        <view class="cell" :style="labels[1].style">{{ item.no }}</view>
        <view class="cell" :style="labels[2].style">{{ item.score || 0 }}</view>
        <view class="dashed-line"></view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps({
  lists: { type: Array, default: () => [] },
});

const labels: any = [
  { name: "姓名", style: { width: "100%", paddingLeft: "32rpx" } },
  { name: "党籍编号", style: { width: "100%" } },
  { name: "得分", style: { width: "100%", "justify-content": "center" } },
];
</script>

<style lang="scss" scoped>
.list-index {
  overflow: hidden;
  border-radius: 16rpx;

  .header-wrap {
    display: flex;
    align-items: center;
    height: 100rpx;
    font-size: 28rpx;
    color: #71411b;
    opacity: 0.9;
    background: #fff0d7;

    .item {
      display: flex;
      align-items: center;
    }
  }

  .list {
    background: #fff;
    margin-bottom: 32rpx;

    .item {
      position: relative;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 80rpx;
      border-radius: 16rpx 0 0 16rpx;
      margin-bottom: 16rpx;
      color: #333333;

      .dashed-line {
        position: absolute;
        bottom: 0;
        width: 622rpx;
        height: 4rpx; /* 设置元素的高度为1像素 */
        background: repeating-linear-gradient(
          to right,
          #f2f0ec,
          #f2f0ec 15rpx,
          transparent 30rpx
        ); /* 创建一条虚线背景 */
      }

      &:last-child {
        .dashed-line {
          height: 0;
        }
      }

      .cell {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>